﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>promise-ajax</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <h1>promise-ajax</h1><br/>

    <div id="app">
        {{name}}
    </div>
<script src="../js/vue-2.5.16.js"></script>

<!--基于promise-->
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    var app = new Vue({
        el:'#app',
        //钩子函数
        //发起ajax的方法写created会好点
        created(){//在数据(data里的数据)被初始化后会调用，this指向的也是new Vue当前实例
            console.log('created');
            console.log(this.name);

            //Promise解决回调问题

            //在回调函数中this指向的是axios了，所以要使用箭头函数
            axios.get('./carts.json').then(resp=>{
                console.log(resp);
                this.products = resp.data;
            }).catch(error=>{
                console.log(error);
            })


        },
        methods:{
            //模拟    做饭 -> 买菜    的过程         查看2.5.1有传统回调的写法
            //使用promise解决回调问题
            promiseTest(){
                //console.log(Promise);
                //resolve代表的是成功调用的函数
                //reject代表的是失败调用的函数
                //Promise当中传入的参数resolve和reject均是函数
                //Promise的实例就一个then方法，then方法中有两个参数
                //要么成功resolve要么失败reject，要么就是等待也就是pendding
                let pro = new Promise((resolve,reject)=>{
                    setTimeout(function(){
                        //resolve('正在买菜中...');
                        reject('出错啦...');
                    },2000)
                });
                pro.then((data)=>{
                    //有结果了才打日志
                    console.log(data);
                },(error)=>{
                    console.log(error);
                    //同理，上面过2000毫秒以后如果调用的是reject那么，会调用这个函数
                });

            },
            //用概率来决定是否买包
            buyPack(){
                return new Promise((resolve,reject)=>{
                    setTimeout(function(){
                        if(Math.random()>0.5){
                            resolve('买');
                        }else{
                            reject('不买');
                        }
                    },Math.random()*1000);
                });
            },
            promiseTest2(){
                //没有使用回调函数，自动把值传回来
                this.buyPack().then((data)=>{
                    console.log(data);
                },(error)=>{
                    console.log(error);
                });
            }
        },
        data:{
            name:'模版数据',
            products:[]
        },
        mounted(){
            console.log('mounted');
            console.log(this.name);
            this.promiseTest();
            this.promiseTest2();
        }
    });
</script>

</body>
</html>